<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        div {
            border: 2px solid red;
        }

        img {
            /*图片默认与文字基线对齐,改变图片与文字的对齐方式*/
            /*为div设置border发现底部有白色边距，原因是div随内容填充高度，而图片与文字基线默认对齐会多出一块*/
            /*解决办法一：改变图片与文字对齐方式 图片与文字底部、顶部、中线对齐*/
            /*该属性只对行内、行内块(img、input、table)有效，对块元素无效*/
            /*vertical-align: bottom;*/
            /*解决办法二：将image转为块级元素,这样文字与图片就不会在一行显示*/
            display: block;
        }
    </style>
</head>
<body>
<!--让文本垂直居中使用margin:0 auto,但是要满足元素有宽度而且是块级元素-->

<div>
    <img src="../image/tudou.jpg" alt="">
    this is my flag 会计
</div>
</body>
</html>